import {useEffect, useState} from "react";
import {Spin} from "antd";
import './index.scss'
import RoleContent from "./content";
import {IPageResponse, IParam, PageInfo} from "@/common/common";
import {axiosGetRoleList} from "@/common/apis/role";

const RoleList = () => {

  const [loading, setLoading] = useState<boolean>(false)
  const [params, setParams] = useState<IParam>({page: 1, size: 10});
  const [pageResponse, setPageResponse] = useState<IPageResponse<any>>({pageInfo: {page: 1, size: 10, total: 0}})

  useEffect(() => {
    apiGetRoleList()
  }, [params]);

  const apiGetRoleList = async () => {
    setLoading(true)
    const res = await axiosGetRoleList(params || {});
    if (res.code === 0) {
      setPageResponse(res)
    }
    setLoading(false)
  }

  return (
    <div className="RoleListContainer">
      <Spin spinning={loading}>
        <RoleContent
          pageResponse={pageResponse}
          refreshCallBack={apiGetRoleList}
          onChangePage={(pageInfo: PageInfo) => {
            if (pageInfo.page !== params.page || pageInfo.size !== params.size) {
              setParams({...params, ...pageInfo})
            }
          }}
        />
      </Spin>
    </div>
  )
}

export default RoleList
